<template>
  <div class="modelVersionHeaderCOntainer">
    <div class="modelViewcontainer model_center_Info">
      <div class="model_header_Info">基本信息</div>
      <div class="headerInfo">
        <div class="headerInfo_versionInfo">
          <div>
            <span class="headerInfo_span">模型名称：</span>
            {{ modelDataInfo.modelName }}
          </div>
          <div>
            <span class="headerInfo_span">开发人员：</span>
            {{ modelDataInfo.modelAuthor }}
          </div>
          <div>
            <span class="headerInfo_span">版本数量：</span>
            {{ modelDataInfo.versionNum }}
          </div>
          <div>
            <span class="headerInfo_span"> 模型类型：</span>
            {{ modelDataInfo.modelType }}
          </div>
          <div>
            <span class="headerInfo_span">模型描述：</span>
            {{ modelDataInfo.description }}
          </div>
        </div>
        <div
          style="width: 300px; height: 250px"
          ref="leftEcharts"
          id="leftEcharts"
        ></div>
      </div>
      <hr />
      <div class="versionType">
        <div class="versionTypeBtn">
          <el-button
            type="text"
            v-if="modelId == 1"
            style="font-size: 20px; color: #02b4fe"
            @click="changeTypeShow('correct')"
            >版本发现概率</el-button
          >
          <el-button
            type="text"
            v-else
            style="font-size: 20px; color: #02b4fe"
            @click="changeTypeShow('correct')"
            >版本迭代正确率</el-button
          >
          <el-button
            type="text"
            style="font-size: 20px; color: #02b4fe; margin-left: 0px"
            @click="changeTypeShow('time')"
            >版本训练时序图</el-button
          >
        </div>
        <div class="versionTypeShowRight">
          <div style="height: 250px" ref="leftEcharts2" id="leftEcharts2"></div>
        </div>
      </div>
      <hr />
      <div class="dataSetStyle">
        <div class="dataSetStyleLeft">
          <div v-for="item in modelDataInfo.versions" :key="item.id">
            <div
              class="dataSetStyleLeftFirst"
              @click="changeBtnVersion(item.modelId, item.id)"
            >
              <div v-if="item.inUse === 1" style="color: #02b4fe">
                <i class="el-icon-video-play" style="margin-right: 10px"></i>
                <span>{{ item.versionNo }}</span>
                <span
                  >({{ item.accuracy ? item.accuracy.toFixed(2) : "" }}%)</span
                >
              </div>
              <div v-else style="display: inline-block; margin-right: 10px">
                <span>{{ item.versionNo }}</span>
                <span
                  >({{ item.accuracy ? item.accuracy.toFixed(2) : "" }}%)</span
                >
              </div>
              <el-popconfirm
                title="是否开始训练？"
                @confirm="publishVersionHandle(item.modelId, item.id)"
              >
                <el-button
                  slot="reference"
                  v-if="item.inUse === 0"
                  type="primary"
                  size="mini"
                  >开始训练</el-button
                >
              </el-popconfirm>
            </div>
          </div>
        </div>
        <div class="dataSetStyleRight">
          <div class="firstDataSet">
            <h1>数据集</h1>
            <div class="firstDataSetStyle">
              <div class="dataSetStyleShow subparagraphNumber">
                <span class="dataSetStyleShow_number">
                  {{ modelTypeVersion.dataSetTotalCount }}
                </span>
                <span class="dataSetNumVersion">条目数</span>
              </div>
              <div class="dataSetStyleShow sampleNumber">
                <span class="dataSetStyleShow_number">
                  {{ modelTypeVersion.dataSetTrainCount }}
                </span>
                <span class="dataSetNumVersion">样本数</span>
              </div>
              <div class="dataSetStyleShow textNumber">
                <span class="dataSetStyleShow_number">
                  {{ modelTypeVersion.dataSetTestCount }}
                </span>
                <span class="dataSetNumVersion">测试数</span>
              </div>
            </div>
          </div>
          <div class="previewDeal">
            <h1>预处理</h1>
            <div class="preViewDealFlex">
            <el-tag v-for="(item,index) in modelTypeVersion.operateTypesObj"
              :key="index">
              {{ item.typesKey }}({{
                item.typesValue
              }}次)
              </el-tag>
            </div>
          </div>
          <div class="trainData">
            <h1>训练参数</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "@/assets/styles/modelview.scss";
import {
  getModelInfo,
  getModelVersionInfo,
  publishVersion,
} from "@/api/aifactory";
export default {
  name: "",
  components: {},
  data() {
    return {
      listDatas: [],
      modelDataInfo: [],
      modelDataInfoVersions: [],
      modelTypeVersion: [],
      modelId: 0,
      modelType: "correct",
      recordId: 0,
      formData: {},
    };
  },
  created() {},
  mounted() {
    clearInterval(this.$route.query.timer);
    this.getModelInfoHandle();
  },
  methods: {
    getModelInfoHandle() {
      let modelId = (this.modelId = this.$route.query.id);
      console.log("modelid", modelId);
      getModelInfo(modelId).then((res) => {
        if (res.code === 200) {
          this.modelDataInfo = res.data;
          this.modelDataInfoVersions = Object.values(res.data.versions);
          console.log(97, this.modelDataInfo, this.modelDataInfoVersions);
          this.leftEcharts(res.data?.topCorrectRate.toFixed(0));
          this.leftEcharts2();
          let modelVersionId = Object.values(res.data.versions).filter(
            (item) => {
              return item?.inUse === 1;
            }
          )?.[0]?.id;
          getModelVersionInfo(modelId, modelVersionId).then((res) => {
            if (res.code === 200) {
              console.log(62, res.data);
              if (JSON.stringify(res.data.operateTypes) !== "{}") {
                let operateTypesObj = [];
                Object.keys(res.data.operateTypes).map((item) => {
                  operateTypesObj.push({
                    typesKey: item,
                    typesValue: res.data.operateTypes.item,
                  });
                });
                res.data.operateTypesObj = operateTypesObj;
              }
              this.modelTypeVersion = res.data;
              console.log("info", this.modelDataInfoVersions);
              console.log("getInfo, modelTypeVersion", this.modelTypeVersion);
            } else {
              message.warning(res.msg);
            }
          });
        }
      });
    },
    leftEcharts(data) {
      const leftEcharts = echarts.init(this.$refs.leftEcharts);
      let option = {
        title: {
          text: "最高正确率",
          y: "bottom",
          x: "center",
          textStyle: {
            color: "#fff",
          },
          color: "#fff",
        },

        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 10,
              itemStyle: {
                borderColor: "#02a5db",
                color: "#02a5db",
              },
            },
            axisLine: {
              lineStyle: {
                width: 12,
              },
            },
            axisTick: {
              show: false,
            },

            splitLine: {
              length: 10,
              lineStyle: {
                width: 2,
                color: "#fff",
              },
            },
            axisLabel: {
              distance: 15,
              color: "#fff",
              fontSize: 12,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 15,
              itemStyle: {
                borderWidth: 6,
                color: "#fff",
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              offsetCenter: [0, "60%"],
              color: "#fff",
            },
            data: [
              {
                value: data,
              },
            ],
          },
        ],
      };
      document
        .getElementById("leftEcharts")
        .removeAttribute("_echarts_instance_");
      leftEcharts.setOption(option);
    },
    leftEcharts2() {
      const leftEcharts2 = echarts.init(this.$refs.leftEcharts2);
      let option2 = {};
      if (this.modelType == "correct") {
        option2 = {
          title: {
            show: true,
            text: "版本迭代正确率",
            textStyle: {
              color: "#fff",
            },
            left: "center",
          },
          tooltip: {
            trigger: "axis",
          },
          backgroundColor: "transparent",
          color: ["#3398DB"],
          grid: {
            top: "10%",
            bottom: "10%",
            left: "15%",
            right: "10%",
          },
          xAxis: {
            type: "category",
            data: this.modelDataInfoVersions?.map((item) => item.versionNo),
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D7EEFE",
                width: 1,
              },
            },
            axisTick: { show: false },
            axisLabel: {
              fontSize: 14,
              color: "#D5F5FD",
              interval: 0, // 代表显示所有 x 轴标签
            },
            z: 10,
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D7EEFE",
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(131,152,163,0.5)",
                type: "dashed",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              fontSize: 14,
              color: "#D5F5FD",
            },
            boundaryGap: false, // 从最底部开始
            min: 0, // 确保从零开始
          },
          series: [
            {
              type: "bar",
              data: this.modelDataInfoVersions?.map((item) =>
                item?.accuracy?.toFixed(2)
              ),
              label: {
                show: true,
                position: "top",
                formatter: function (p) {
                  return p.data + "%";
                },
              },
            },
          ],
        };
      } else {
        option2 = {
          title: {
            show: true,
            text: "版本训练时序图",
            textStyle: {
              color: "#fff",
            },
            left: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              if (params && params.data) {
                return (
                  params?.name +
                  " <br />开始时间:" +
                  params?.data[2] +
                  "<br />结束时间:" +
                  params?.data[3]
                );
              }
            },
          },
          backgroundColor: "transparent",
          grid: {
            top: "10%",
            bottom: "10%",
          },
          xAxis: {
            type: "time",
            splitLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 0,
              color: "#D5F5FD",
              interval: 0,
            },
          },
          yAxis: {
            type: "category",
            data: Array.from(
              new Set(
                this.modelDataInfo?.sequenceVO?.showData?.map((item) => {
                  return item[0];
                })
              )
            ),
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: "#D5F5FD",
            },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              type: "custom",
              renderItem: function (params, api) {
                var categoryIndex = api.value(1);
                var start = api.coord([api.value(2), categoryIndex]);
                var end = api.coord([api.value(3), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                return {
                  type: "rect",
                  shape: echarts.graphic.clipRectByRect(
                    {
                      x: start[0],
                      y: start[1] - height / 2,
                      width: end[0] - start[0],
                      height: height,
                    },
                    {
                      x: params.coordSys.x,
                      y: params.coordSys.y,
                      width: params.coordSys.width,
                      height: params.coordSys.height,
                    }
                  ),
                  style: api.style(),
                };
              },
              encode: {
                x: [2, 3],
                y: 1,
              },
              data: this.modelDataInfo?.sequenceVO?.showData,
            },
          ],
        };
      }
      document
        .getElementById("leftEcharts2")
        .removeAttribute("_echarts_instance_");
      leftEcharts2.setOption(option2);
    },
    changeTypeShow(val) {
      this.modelType = val;
      this.leftEcharts2();
    },
    changeBtnVersion(modelId, id) {
      console.log("changeBtnVersion", modelId, id);
      this.recordId = id;
      getModelVersionInfo(modelId, id).then((res) => {
        if (res.code === 200) {
          console.log("res.data.trainParams", res.data.trainParams);
          if (JSON.stringify(res.data.operateTypes) !== "{}") {
            let operateTypesObj = [];
            Object.keys(res.data.operateTypes).map((item) => {
              operateTypesObj.push({
                typesKey: item,
                typesValue: res.data.operateTypes[item],
              });
            });
            res.data.operateTypesObj = operateTypesObj;
          }
          this.modelTypeVersion = res.data;
          console.log("change,modelTypeVersion", this.modelTypeVersion);
          Object.keys(JSON.parse(res.data.trainParams)).forEach((item) => {
            this.formData.setFieldsValue({
              [`${item}`]: JSON.parse(res.data.trainParams)[`${item}`],
            });
          });
          console.log(433, this.formData);
        } else {
          message.warning(res.msg);
        }
      });
    },
    publishVersionHandle(modelId, id) {
      console.log(modelId, id);
      publishVersion(modelId, id).then((res) => {
        if (res.code === 200) {
          // message.success("版本开始训练");
          this.$message({ message: "版本开始训练", type: "success" });
          if (modelId) {
            this.modelInfoHandle = modelId;
          }
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
  },
};
</script>
<style scoped>
.ai-progress {
  line-height: 1.5 !important;
  width: 60%;
}
</style>
